<form class="layui-form" action="" method="post" lay-filter="LAY-role-form-add">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" placeholder="请输入名称" autocomplete="off" class="layui-input"
                       lay-verify="required" maxlength="30">
            </div>
        </div>
    </div>
    <!--xtree容器 begin-->
    <div id="system-role-add-layui-xtree"
         style="width:65%;height:65%; border:1px solid black; margin-left: 70px;margin-bottom: 20px;overflow:auto;float:left;"></div>
    <!--xtree容器 end-->

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="LAY-role-form-save">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>

<script>
    layui.use(['admin', 'form'], function () {
        var $ = layui.$
            , admin = layui.admin
            , setter = layui.setter
            , layer = layui.layer
            , response = setter.response
            , form = layui.form;


        // 依然不兼容IE，不是不想，是真的不会.
        //创建tree
        var xtree = new layuiXtree({
            elem: 'system-role-add-layui-xtree'           //放xtree的容器，id，不要带#号（必填）
            , form: form                       //layui form对象 （必填）
            , data: '/admin/options?menu_tree'    //服务端地址（必填）
            , ckall: true,
            titleKey: 'name',
            valueKey: 'id',
            dataKey: 'children'
        });

        form.render(null, 'LAY-role-form-add');

        form.on('submit(LAY-role-form-save)', function (data) {
            var menuIds = [];
            layui.each(xtree.GetChecked(), function (index, item) {
                if (item.value && item.value !== 'on') {
                    menuIds.push(item.value);
                }
            });

            admin.req({
                url: '/admin/roles'
                , type: 'POST'
                , dataType: "json"
                , traditional: true
                , data: {
                    menuAuthIds: menuIds
                    , name: data.field.name
                }
                , success: function (res) {
                    var statusCode = response.statusCode;
                    if (res[response.statusName] == statusCode.ok) {
                        layer.closeAll('page');  //关闭page的弹框
                        layer.msg('添加成功', {
                            icon: 1
                        });
                    }
                }
            });
            return false;
        });
    });
</script>
